<template>
	<view :id="id" :type="type" class="common-bottom-toast">
		<view class="bottom__toast flex-x">
			<view class="item12-4 flex-x">
				<view @tap="home" class="bottom-func flex-y">
					<i style="color:#EBB566" class="iconfont iconshouye1" />
					首页
				</view>
				<view @tap="collect(id)" class="bottom-func flex-y">
					<i :style="{color:collect_status == 1?'#EBB566':'#CDCDCD'}" class="iconfont iconshoucang" />
					收藏
				</view>
				<view @tap="share" class="bottom-func flex-y">
					<i style="color:#4EB831" class="iconfont iconfenxiang1" />
					分享
				</view>
			</view>
			
			<view class="item12-8">
				<slot></slot>
			</view>
		</view>
	
		<toast v-show="isShow" height="20" >
			<view class="flex-x item-3 center">
				<view @tap="wechat" class="flex-y center share__btn">
					<view class="icon__group">
						<i style="color: #FFBA00;" class="iconfont iconxiaoxi"></i>
					</view>
					<view>
						微信好友
					</view>
				</view>
				<view @tap="poster" class="flex-y center share__btn">
					<view class="icon__group">
						<i style="color: #FFBA00;" class="iconfont icontupian"></i>
					</view>
					<view>
						分享海报
					</view>
				</view>
				<view @tap="copyLink" class="flex-y center share__btn">
					<view class="icon__group">
						<i style="color: #91C0FC;" class="iconfont iconfujian"></i>
					</view>
					<view>
						复制链接
					</view>
				</view>
			</view>
			
			<view @tap="share" class="bottom__cancel">
				取消
			</view>
		</toast>
		
		<!-- 分享海报弹窗 -->
		<sharePoster :images="img" v-if="posterToast" v-show="posterToast" @event="poster"></sharePoster>
		<!-- <toast v-show="posterToast" height="20" @event="posterToast = false">
			<view class="shareTop">
				分享到
			</view>
			<view class="wx">
				<view class="wx2">
					<image src="../../../static/img/wx.png" class="img"></image>
					<view class="wx3">微信</view>
				</view>
				<view class="wx2">
					<image src="../../../static/img/down.png" class="img"></image>
					<view class="wx3">保存</view>
				</view>
			</view>
			<view class="closeToast" @tap="posterToast = false">
				取消
			</view>
		</toast> -->
	</view>
</template>

<script>
	import sharePoster from "@/components/poster/share-poster.vue"
	import toast from "@/components/goodsMsg/toast.vue"
	import util from "@/common/util.js";
	
	export default {
		components: {
			toast,
			sharePoster
		} ,
		data() {
			return {
				isShow: false,
				posterToast: false,
				img:null,
			}
		},
		mounted() {
			console.log('图片',this.images);
		},
		methods: {
			home: function () {
				/* uni.navigateTo({
					url: '/pages/index/index',
				}); */
				uni.navigateBack({
					delta: 0
				});
			} ,
			share: function () {
				this.isShow = !this.isShow
			} ,
			collect: function (id) {
				console.log('收藏',id)
				console.log('价格',this.price)
				let resData = {
					goods_id:id,
					price:this.price
				}
				this.$shopApi.apiPost('font/collect/save',resData).then(res => {
					console.log(res);
					const DATA = res.data
					if(DATA.code == 200){
						this.util.showDialog('收藏成功！')
					}else{
						this.util.showDialog('收藏失败！')
					}
				})
			} ,
			wechat: function () {
				console.log('微信分享')
				// #ifdef APP-PLUS
				uni.share({
				    provider: 'weixin',
				    scene: "WXSceneSession",
				    type: 5,
				    imageUrl: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/962fc340-4f2c-11eb-bdc1-8bd33eb6adaa.png',
				    title: '欢迎体验uniapp',
				    miniProgram: {
				        id: 'gh_abcdefg',
				        path: 'pages/index/index',
				        type: 0,
				        webUrl: 'http://uniapp.dcloud.io'
				    },
				    success: ret => {
				        console.log(JSON.stringify(ret));
				    }
				});
				// #endif
			},
			poster: function () {
				console.log('海报分享')
				this.posterToast = !this.posterToast
				this.img = this.images
				console.log(this.img);
			},
			copyLink: function () {
				/* 复制当前商品的页面路径 */
				// #ifdef APP-PLUS
					var pages = getCurrentPages();
					console.log('pages',pages[0].$getAppWebview().children()[0].getURL());
				// #endif
				console.log('链接分享')
			},
		} ,
		props: {
			// 类型
			type: {
				type: String ,
				default: '0'
			} ,
			id: {
				type: String ,
				default: ''
			},
			price: {
				type: String ,
				default: ''
			},
			collect_status: {
				type: Number ,
				default: 0
			},
			images: {
				type: String ,
				default: ''
			},
		}
	}
</script>

<style>
	.wx3{
		margin-top: 20rpx;
		font-size: 24rpx;
	}
	
	.wx2{
		display: flex;
		flex-direction: column;
		text-align: center;
	}
	
	.closeToast{
		font-size: 32rpx;
		text-align: center;
		margin-top: 20px;
	}
	
	.shareTop{
		text-align: center;
		font-size: 28rpx;
		margin-top: 20rpx;
		margin-bottom: 24rpx;
	}
	
	.wx{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
	
	.img{
		width: 90rpx;
		height: 90rpx;
	}
	
	.bottom__cancel {
		border-top: 2rpx solid #CDCDCD;
		text-align: center;
		width: 100vw;
		height: 80rpx;
		font-size: 24rpx;
		line-height: 80rpx;
		position: absolute;
		bottom: 0;
		color: #CDCDCD;
	}
	
	.common-bottom-toast {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		background-color: #FFFFFF;
		border-top: 4rpx solid #F5F3F4;
	}
	
	.bottom__toast {
		padding: 10rpx 30rpx;
	}
	
	.bottom__toast .bottom-func {
		text-align: center;
		font-size: 24rpx;
		margin-right: 30rpx;
	}
	
	.bottom__toast i {
		font-size: 48rpx;
	}
	
	.share__btn {
		font-size: 24rpx;
		line-height: 36rpx;
	}
	
	.icon__group {
		margin: 30rpx 0 10rpx 0;
		width: 68rpx;
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
		background-color: #F6F6FE;
		border-radius: 100%;
	}
	
	.icon__group i{
		font-size: 46rpx;
	}
</style>
